<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>简易电商网站</title>
</head>

<body class="bg-gray-100 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-gray-800">电商商城</a>
            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-600 hover:text-gray-800">首页</a>
                <a href="#" class="text-gray-600 hover:text-gray-800">商品分类</a>
                <a href="#" class="text-gray-600 hover:text-gray-800">购物车 <i class="fa-solid fa-cart-shopping"></i></a>
                <a href="/login.html" class="text-gray-600 hover:text-gray-800">我的账户</a>
            </div>
        </div>
    </nav>
    <!-- 横幅图 -->
    <section class="relative">
        <img src="/image/0.jpg" alt="横幅图" class="w-full h-auto">
    </section>
    <!-- 商品展示 -->
    <section class="container mx-auto px-4 py-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">热门商品</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-md shadow-md">
                <img src="/image/1.png" alt="商品 1" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold text-gray-800 mb-1">商品名称 1</h3>
                <p class="text-gray-600 mb-2">这是商品的简短描述。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xl font-bold text-red-500">$99.99</span>
                    <button class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">加入购物车</button>
                </div>
            </div>
            <div class="bg-white p-4 rounded-md shadow-md">
                <img src="/image/2.png" alt="商品 2" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold text-gray-800 mb-1">商品名称 2</h3>
                <p class="text-gray-600 mb-2">这是商品的简短描述。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xl font-bold text-red-500">$129.99</span>
                    <button class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">加入购物车</button>
                </div>
            </div>
            <div class="bg-white p-4 rounded-md shadow-md">
                <img src="/image/3.png" alt="商品 3" class="w-full h-auto mb-2">
                <h3 class="text-lg font-bold text-gray-800 mb-1">商品名称 3</h3>
                <p class="text-gray-600 mb-2">这是商品的简短描述。</p>
                <div class="flex justify-between items-center">
                    <span class="text-xl font-bold text-red-500">$79.99</span>
                    <button class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">加入购物车</button>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <p class="text-gray-600">版权所有 &copy; 2025 电商商城</p>
            <div class="flex space-x-4">
                <a href="#" class="text-gray-600 hover:text-gray-800">关于我们</a>
                <a href="#" class="text-gray-600 hover:text-gray-800">联系我们</a>
                <a href="#" class="text-gray-600 hover:text-gray-800">隐私政策</a>
            </div>
        </div>
    </footer>
</body>

</html>
    